<script setup lang="ts">
//首页
import Single from "@/components/page/single.vue";
import SevenTab from "@/components/block/home/sevenTab.vue";
import Related from "@/components/block/home/related.vue";
import Hot from "@/components/block/home/hot.vue";
import Four from "@/components/block/home/four.vue";
import Slid from "@/components/block/home/slide.vue";

import { dataLocal } from "@/store/store";


//拿到首页
const home = dataLocal.home?.pc;

//拿到首页判断
const pageSwitch = home?.switch ?? false;

//幻灯片
const slid = home?.slid;
//置顶推荐
const recommend = home?.recommend;
//热点
const hot = home?.hot;
//7格
const sevenData = home?.selected;

const end = home?.end;
</script>

<template>
  <template v-if="pageSwitch === 'true'">
    <div
      class="lg:w-1220-px lg:m-auto justify-between lg:mt-10 lg:overflow-hidden main"
    >
      <Slid :data="slid" />
      <Four :data="recommend" />
      <Hot :data="hot" />
      <SevenTab :data="sevenData" />
      <Related :data="end" />
    </div>
  </template>

  <template v-else><Single /> </template>
</template>

<style scoped lang="less">
@media (min-width: 1024px) {
  //TODO:不明白，为啥这里写的css不生效
  .main {
    width: 1220px;
  }
}
</style>
